<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="edge" />
<title>jQuery EasyUI 1.5.x Of Insdep theme examples</title>
<!--
    注意样式表优先级
    主题样式必须在easyui组件样式后。
-->
  
<link href="https://cdn.insdep.com/themes/1.0.0/easyui.css" rel="stylesheet" type="text/css">
<link href="https://cdn.insdep.com/themes/1.0.0/default_theme.css" rel="stylesheet" type="text/css">
<link href="https://cdn.insdep.com/themes/1.0.0/icon.css" rel="stylesheet" type="text/css">
  
<script type="text/javascript" src="https://cdn.insdep.com/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.insdep.com/easyui/jquery.easyui-1.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.insdep.com/themes/1.0.0/jquery.insdep-extend.min.js"></script>
  
  
</head>
  
<body>
    <div id="master-layout">
        <div data-options="region:'north',border:false,bodyCls:'theme-header-layout'">
            <div class="theme-navigate">
                <div class="left">
  
                    <a href="#" class="easyui-menubutton theme-navigate-user-button" data-options="menu:'.theme-navigate-user-panel'">匿名</a>
                    <a href="#" class="easyui-linkbutton">开始</a>
                      
                      
                    <!--这是用户面板-->
                    <div class="theme-navigate-user-panel">
                       <dl>
                             <dd>
                                <img src="https://cdn.insdep.com/themes/1.0.0/images/portrait86x86.png" width="86" height="86">
                                <b class="badge-prompt">匿名<i class="badge color-important">10</i></b>
                                <span>examples@insdep.com</span>
                                <p>安全等级：<i class="text-success">高</i></p>
                            </dd>
                            <dt>
                                <a class="theme-navigate-user-modify">修改资料</a>
                                <a class="theme-navigate-user-logout">注销</a>
                            </dt>
                       </dl>
                    </div>
                    <!--end 这是用户面板-->
  
  
                </div>
                <div class="right"></div>
            </div>
            <!--end theme-navigate 导航条-->
          
        </div>
        <!--end region:'north'-->
        <div data-options="region:'center',border:false" id="control">
             <h1>你好，世界！</h1>
        </div>
        <!--end region:'center'-->
    </div>
    <!--end master-layout-->
  
  
    <script>
        $(function(){
              
            /*布局部分*/
            $('#master-layout').layout({
                fit:true/*布局框架全屏*/
            });   
        });  
    </script>
  
  
</body>
</html>